<template>
  <div class="quotationRemind view">
    <div class="remind-breadcrumb flexb">
      <div class="flex">
        <div @click="handleToRemind" style="cursor: pointer;">{{ $t('candyBox.vipTool') }}</div>
        <div style="margin: 0 10px;">></div>
        <div>{{$t('ndxStake.marketRemind')}}</div>
      </div>
      <div class="removeAll" v-if="marketRemindRecordList.length > 0" @click="handleRemoveAllRemindList()">{{$t('ndxStake.removeAll')}}</div>
    </div>
    <div class="quotationRemindCont">
      <template v-if="marketRemindRecordList.length > 0">
        <div class="quotationRemindList" v-for="item in marketRemindRecordList" :key="item.id">
          <div class="flex target">
            <div class="symbol flex">
              <img v-if="item.imageUrl" :src="item.imageUrl">
              <img v-else src="https://ndi.340wan.com/upload/20180919/ed752ac2f6174370bf879620ec821eee.png">
              <span v-if="item.symbol">{{ parseSymbol(item.symbol,
                item.valuationCoinContract)[1].toUpperCase() }} / {{ parseSymbol(item.symbol, item.valuationCoinContract)[2].toUpperCase() }}</span>
            </div>
            <div class="highPrice flexb">
              <span>{{$t('ndxStake.priceHigh')}}：</span>
              <span v-if="item.maxPriceStr">{{ item.maxPriceStr }} {{ parseSymbol(item.symbol, item.valuationCoinContract)[2].toUpperCase() }}</span>
              <span v-else>--</span>
            </div>
            <div class="lowPrice flexb">
              <span>{{$t('ndxStake.priceLow')}}：</span>
              <span v-if="item.minPriceStr">{{ item.minPriceStr }} {{ parseSymbol(item.symbol, item.valuationCoinContract)[2].toUpperCase() }}</span>
              <span v-else>--</span>
            </div>
            <div class="volatility flexb">
              <span>{{$t('ndxStake.volatility')}}：</span>
              <span v-if="item.volatility">{{ item.volatility }}%</span>
              <span v-else>--</span>
            </div>
            <div class="operation flexb">
              <span @click="handleChangeSet(item)">{{$t('ndxStake.edit')}}</span>
              <span @click="handleRemoveRemindList(item.id)">{{$t('ndxStake.remove')}}</span>
            </div>
          </div>
        </div>
      </template>
      <div class="noData" v-else>
        <img v-if="$store.state.app.language === 'zh-CN'"
        src="@/assets/img/member/noData-cn.png">
        <img v-if="$store.state.app.language === 'zh-TW'"
        src="@/assets/img/member/noData-tw.png">
        <img v-if="$store.state.app.language === 'en'"
        src="@/assets/img/member/noData-en.png">
        <img v-if="$store.state.app.language === 'ko'"
        src="@/assets/img/member/noData-ko.png">
        <p>{{$t('ndxStake.addTip')}}</p>
        <span @click="handleToMarket">{{$t('ndxStake.chooseTrad')}} ></span>
      </div>
    </div>
    <!-- 行情提醒设置 -->
    <el-dialog
      class="remindSet"
      :show-close="true"
      :close-on-click-modal="false"
      :visible.sync="remindSetVisible"
      width="750px">
      <remind-set
        :remindSetStatus="1"
        :symbolId="symbolId"
        :symbol="symbol"
        :remindSetVisible="remindSetVisible"
        :symbolPrice="symbolPrice"
        :priceDecimal="priceDecimal"
        :maxMinPrice="maxMinPrice"
        :contract="contract"
        @listenRemind="handleRemind"/>
    </el-dialog>
  </div>
</template>

<script>
import RemindSet from '@/components/RemindSet';
// import { EosModel } from '@/utils/eos';
import { authorized, parseSymbol } from '@/utils/validate';

export default {
  name: 'quotationRemind', // 行情提醒
  data() {
    return {
      marketRemindRecordList: [], // 行情提醒数据
      remindSetVisible: false,
      symbolId: 0, // 交易对id
      symbol: '', // 交易对
      user: '', // 用户会员信息
      symbolPrice: '', // 交易对价格
      priceDecimal: '', // 价格精度
      maxMinPrice: {}, // 列表数据
      contract: '', // 合约
    }
  },
  components: {
    RemindSet
  },
  props: {},
  watch: {
    remindSetVisible: function change(val) {
      if (!val) {
        this.handleGetRemindData();
      }
    }
  },
  computed: {
  },
  created() {},
  mounted() {
    this.user = this.$store.state.app.accountInfo;
    this.handleGetRemindData();
  },
  beforeDestroy() {},
  methods: {
    // 获取数据
    handleGetRemindData() {
      this.$http.post('/account/queryMarketRemindRecord').then((res) => {
        if (res.code === 1007) {
          this.marketRemindRecordList = [];
          return;
        }
        if (res.code !== 0) {
          return;
        }
        this.marketRemindRecordList = res.marketRemindRecordList;
      });
    },
    // 移除单个列表
    handleRemoveRemindList(val) {
      // TOKEN
      const token = localStorage.getItem('Frontend-Token');
      if (!token) {
        // 获取授权
        this.handleAuthorized(() => {
          this.handleRemoveRemindList(val);
        });
        return;
      }

      const params = {
        id: val
      }
      this.$http.post('/account/delMarketRemindRecord', params).then((res) => {
        // 401授权过期 重新授权
        if (res.code === 401) {
          this.handleAuthorized(() => {
            this.handleRemoveRemindList();
          });
        }
        if (res.code !== 0) {
          this.$message.error(this.$t('ndxStake.removeError'));
          return;
        }
        this.$message.success(this.$t('ndxStake.removeSuccess'));
        // if (this.user.usedMarketRemindCount > 0) {
        //   this.user.usedMarketRemindCount -= 1;
        //   this.user.remainMarketRemindCount += 1;
        // }
        // 更新vuex accountInfo 值
        // this.$store.dispatch('setAccountInfo', this.user);
        // this.handleGetAccountInfo();
        this.handleGetRemindData();
      });
    },
    // 移除全部列表
    handleRemoveAllRemindList() {
      // TOKEN
      const token = localStorage.getItem('Frontend-Token');
      if (!token) {
        // 获取授权
        this.handleAuthorized(() => {
          this.handleRemoveAllRemindList();
        });
        return;
      }

      this.$confirm(this.$t('ndxStake.allRemoveComfirm'), this.$t('public.reTip'), {
        confirmButtonText: this.$t('public.sure'),
        cancelButtonText: this.$t('public.cancel'),
        type: 'warning',
      }).then(() => {
        this.$http.post('/account/delAllMarketRemindRecord').then((res) => {
          // 401授权过期 重新授权
          if (res.code === 401) {
            this.handleAuthorized(() => {
              this.handleRemoveAllRemindList();
            });
            return;
          }
          if (res.code !== 0) {
            this.$message.error(this.$t('ndxStake.removeError'));
            return;
          }
          this.$message.success(this.$t('ndxStake.removeSuccess'));
          // this.user.usedMarketRemindCount = 0;
          // this.user.remainMarketRemindCount = this.user.canCreateRemindCount;
          // 更新vuex accountInfo 值
          // this.$store.dispatch('setAccountInfo', this.user);
          // this.handleGetAccountInfo();
          this.handleGetRemindData();
        });
      }).catch(() => {});
    },
    // 回到会员服务首页
    handleToRemind() {
      this.$router.push({
        name: 'services'
      });
    },
    // 编辑行情提醒设置
    handleChangeSet(item) {
      const x = item.symbolPrice.indexOf('.') + 1;
      const y = item.symbolPrice.length - x;
      this.symbol = item.symbol;
      this.symbolId = item.symbolId;
      this.priceDecimal = y;
      this.symbolPrice = item.symbolPrice;
      this.remindSetVisible = true;
      this.maxMinPrice.maxPrice = item.maxPriceStr;
      this.maxMinPrice.minPrice = item.minPriceStr;
      this.maxMinPrice.id = item.id;
      this.maxMinPrice.volatility = item.volatility;
      this.contract = item.valuationCoinContract;
    },
    // 跳转到行情提醒列表
    handleToMarket() {
      localStorage.setItem('menu-activeIndex', '0,0');
      this.$router.push({
        name: 'market'
      });
    },
    // 关闭弹窗
    handleRemind(event, val) {
      if (event === 'added') {
        this.remindSetVisible = val;
      }
    },
    // 授权操作
    handleAuthorized(callback) {
      authorized(this, (code, result) => {
        if (code === 'error') { // 授权错误
          console.log(result); // eslint-disable-line
          return;
        }
        callback();
      });
    },
    parseSymbol(a, b) {
      return parseSymbol(a, b)
    }
  },
}
</script>
<style lang="scss" scoped>
$-color: #278EDA;
.blueColor {
  color: $-color !important;
}

.color333 {
  color: #333 !important;
}

.view {
  min-height: 600px;

  .remind-breadcrumb {
    padding: 30px 142px 0 40px;
    margin-bottom: 50px;
    color: #333;

    .removeAll {
      color: #278EDA;
      cursor: pointer;
    }
  }

  .quotationRemindCont {
    width: 1000px;
    margin: auto;

    .quotationRemindList {
      color: #333;

      .target {
        padding: 15px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);

        & > div {
          padding: 0 25px;
        }
      }
      .symbol {
        flex: 1;

        img {
          display: inline-block;
          width: 22px;
          height: 22px;
          margin-right: 5px;
        }
      }

      .highPrice, .lowPrice {
        flex: 1.3;

        span:nth-child(1) {
          flex: 1;
        }

        span:nth-child(2) {
          flex: 1.4;
          text-align: center;
        }
      }

      .volatility {
        flex: .6;
      }

      .operation {
        flex: .5;
        padding: 0 10px !important;

        span {
          color: $-color;
          cursor: pointer;
        }
      }
    }

    .noData {
      text-align: center;

      img {
        display: block;
        width: 313px;
        margin: auto;
      }

      p {
        margin: 15px 0 20px;
      }

      span {
        color: #5CB7E7;
        cursor: pointer;
      }
    }
  }
}

.theme-1B1D27 {
  .symbol {
    img {
      background: rgba(255, 255, 255, 0.6);
      border-radius: 50%;
    }
  }
  .remind-breadcrumb {
    color: rgba(255, 255, 255, 0.6);
  }

  .quotationRemindList {
    .target {
      & > div {
        color: rgba(255, 255, 255, 0.6);
      }
    }
  }
}
</style>

